<template>
    <div class="case-code-container">
        <div id="bar-case-5" class="chart-container">

        </div>
        <highlightjs class="code" lang="js" :code="code"></highlightjs>
    </div>
</template>

<script setup>
    /**
     * 动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。
     * 柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
            yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
            yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
            yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
            如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
            xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
            如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
     */
    import { code } from './code/case5.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('bar-case-5');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        const option = {
            title: { text: '动态排序柱状图' },
            tooltip: {},
            animationDuration: 3000, // animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
            animationDurationUpdate: 3000, // animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
            animationEasing: 'linear',
            animationEasingUpdate: 'linear',
            xAxis: {
                type: 'value',
                max: 'dataMax',
            },
            yAxis: {
                type: 'category',
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                // 表示 Y 轴从下往上是从小到大的排列
                inverse: true,
                // max: 2 // 只有最大的3个会被显示
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    realtimeSort: true, // ★★★柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
                    data: [5, 20, 36, 10, 10, 20],
                    label: {
                        show: true,
                        position: 'right',
                        valueAnimation: true,
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                    },
                },
            ],
        };
        // 静态，绘制一次图表
        myChart.setOption(option);

        /** 模拟数据变化 */
        function update (year) {
            const { data } = option.series[0];
            for (let index = 0; index < data.length; ++index) {
                if (Math.random() > 0.6) {
                    data[index] += Math.round(Math.random() * 2000);
                } else {
                    data[index] += Math.round(Math.random() * 200);
                }
            }
            option.title.text = `${year}年的销量`;
            // ★★★重新 绘制一次图表
            myChart.setOption(option);
        }

        // 以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序
        let year = 2002;
        const tid = setInterval(() => {
            update(year);
            year++;
            if (year >= 2024) {
                clearInterval(tid);
            }
        }, 6000);
    });
</script>

<style lang="scss" scoped>
</style>
